<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>多数据源 & ES 导入系统</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- 引入首页私有样式 -->
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div class="container">
    <!-- 登录区域 -->
    <div id="loginSection" class="login-section">
        <div class="login-container">
            <h1 class="login-title">多数据源 & ES 导入系统</h1>

            <!-- 登录表单 -->
            <form id="loginForm" class="login-form">
                <div class="form-group">
                    <label for="loginName">登录名</label>
                    <input
                            type="text"
                            id="loginName"
                            name="loginName"
                            placeholder="请输入登录名"
                            autocomplete="username"
                            required
                    />
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input
                            type="password"
                            id="password"
                            name="password"
                            placeholder="请输入密码"
                            autocomplete="current-password"
                            required
                    />
                </div>

                <!-- 状态提示 -->
                <div id="loginStatus" class="status"></div>

                <!-- 登录按钮 -->
                <button type="submit" id="loginBtn">登录</button>
            </form>
        </div>
    </div>

    <!-- 主内容区域（登录后显示） -->
    <div id="mainContent" class="main-content" style="display: none;">
        <h1>多数据源 & ES 导入系统</h1>

        <!-- 卡片网格布局 - 展示三个主要功能入口 -->
        <div class="card-grid">
            <!-- 数据源管理卡片 -->
            <a href="/datasource.html" class="card">
                <h2>📊 数据源管理</h2>
                <p>添加、查看、删除数据库连接</p>
            </a>

            <!-- 数据导入ES卡片 -->
            <a href="/import-es.html" class="card">
                <h2>📤 数据导入 ES</h2>
                <p>选择数据源、表,导入 Elasticsearch</p>
            </a>

            <!-- 文件导览卡片 -->
            <a href="/file-list.html" class="card">
                <h2>📁 文件导览</h2>
                <p>浏览和管理文件系统</p>
            </a>
        </div>
    </div>
</div>

<!-- 引入API接口 -->
<script src="/js/api.js"></script>
<!-- 引入首页逻辑 -->
<script src="/js/index.js"></script>
</body>
</html>